<template>
	<view style="margin: 20rpx 20rpx 0rpx 20rpx;">
		<view style="display: flex;flex-direction: row">
			<view style="width: 150rpx;">
				<u-button @click="addColnum()">增加</u-button>
			</view>
			<view style="width: 150rpx; margin: 0 0 10rpx 10rpx;">
				<u-button @click="submit()">提交</u-button>
			</view>
		</view>

		<view style="width: 200rpx; margin-bottom: 10rpx;">
			<uni-easyinput v-model="newTableName" />
		</view>

		<uni-table ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th align="center">字段名</uni-th>
				<uni-th width="200" align="center">字段类型</uni-th>
				<uni-th width="200" align="center">主键</uni-th>
				<uni-th align="center">长度</uni-th>
				<uni-th align="center">备注</uni-th>
				<uni-th width="100" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td v-show="item.edit" align="center">{{ item.name }}</uni-td>

				<uni-td v-show="!item.edit" align="center">
					<uni-easyinput v-model="item.name" />
				</uni-td>

				<uni-td align="center">
					<uni-data-picker :readonly="item.edit" placeholder="字段类型" v-model="item.type" :localdata="types" />
				</uni-td>
				<uni-td align="center">
					<uni-data-checkbox :disabled="item.edit" v-model="item.key" :localdata="key"></uni-data-checkbox>
				</uni-td>
				<uni-td v-show="item.edit" align="center">{{ item.length }}</uni-td>
				<uni-td v-show="item.edit" align="center">{{ item.comment }}</uni-td>

				<uni-td v-show="!item.edit" align="center">
					<uni-easyinput v-model="item.length" type="number" />
				</uni-td>
				<uni-td v-show="!item.edit" align="center">
					<uni-easyinput v-model="item.comment" />
				</uni-td>

				<uni-td>
					<view style="display: flex;flex-direction: row;">
						<u-button v-show="item.edit" class="uni-button" size="mini" type="primary" @click="edit(index)">
							修改</u-button>
						<view v-show="!item.edit">
							<u-button class="uni-button" size="mini" type="primary" @click="cancel(index)">取消</u-button>
							<u-button class="uni-button" size="mini" type="primary" @click="confirm(index)">确定
							</u-button>
						</view>
						<u-button class="uni-button" size="mini" type="error" @click="delColnum(index)">删除</u-button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	import {
		updateTable,
		selectTableStruct
	} from '@/api/database/mysql/index.js'
	export default {
		data() {
			return {
				id: 0,
				name: '',
				tableName: '',
				newTableName: '',
				tableData: [],
				key: [{
					value: 0,
					text: '是',
				}, {
					value: 1,
					text: '不是',
				}],
				types: [{
					value: 'int',
					text: 'int'
				}, {
					value: 'char',
					text: 'char'
				}, {
					value: 'varchar',
					text: 'varchar'
				}, {
					value: 'bigint',
					text: 'bigint'
				}],
				currentTableData: {},
				opTableData: [],
				isAdd: 1
			}
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
			this.tableName = option.tableName
			this.newTableName = option.tableName
		},
		onShow() {
			plus.screen.lockOrientation('landscape-primary');
			this.doSelectTableStruct()
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: uni.getStorageSync('backgroundColor')
			})
		},
		onUnload() {
			plus.screen.lockOrientation('portrait-primary');
		},
		methods: {
			doSelectTableStruct() {
				selectTableStruct({
					id: this.id,
					name: this.name,
					tableName: this.tableName
				}).then(res => {
					this.tableData = res.data
				})
			},
			addColnum() {
				this.tableData.push({
					name: '',
					type: '',
					key: 0,
					length: 0,
					comment: '',
					edit: false
				})
				this.isAdd = 0
			},
			edit(index) {
				this.currentTableData = {
					key: this.tableData[index].key,
					name: this.tableData[index].name,
					type: this.tableData[index].type,
					comment: this.tableData[index].comment,
					length: this.tableData[index].length,
					edit: this.tableData[index].edit
				}
				this.tableData[index].edit = !this.tableData[index].edit
			},
			delColnum(index) {
				this.opTableData.push({
					oldName: this.tableData[index].name,
					oldKey: this.tableData[index].key,
					op: 2
				})
				var name = this.tableData[index].name
				this.tableData = this.tableData.filter(item => item.name != name)
			},
			cancel(index) {
				if (this.tableData[index].name == '') {
					uni.showToast({
						title: '字段名不能为空',
						icon: 'error'
					})
					return
				}

				this.tableData[index].key = this.currentTableData.key
				this.tableData[index].name = this.currentTableData.name
				this.tableData[index].type = this.currentTableData.type
				this.tableData[index].comment = this.currentTableData.comment
				this.tableData[index].length = this.currentTableData.length
				this.tableData[index].edit = this.currentTableData.edit
			},
			confirm(index) {
				if (this.isAdd == 0) {
					this.currentTableData.name = this.tableData[index].name,
					this.currentTableData.key = this.tableData[index].key
				}
				
				if (this.tableData[index].name == '') {
					uni.showToast({
						title: '字段名不能为空',
						icon: 'error'
					})
					return
				}

				this.tableData[index].edit = !this.tableData[index].edit
				this.opTableData.push({
					oldName: this.currentTableData.name,
					oldKey: this.currentTableData.key,
					key: this.tableData[index].key,
					name: this.tableData[index].name,
					type: this.tableData[index].type,
					comment: this.tableData[index].comment,
					length: this.tableData[index].length,
					op: this.isAdd
				})

				this.currentTableData = {}
				this.isAdd = 1
			},
			submit() {
				updateTable({
					id: this.id,
					name: this.name,
					tableName: this.tableName,
					newTableName: this.newTableName,
					tableColumnDTOS: this.opTableData
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
					
					this.opTableData = []

					this.doSelectTableStruct()
				})
			}
		}
	}
</script>

<style>

</style>
